<!--
 * @Descripttion: 
 * @version: 
 * @Author: wangys
 * @Date: 2022-06-08 15:15:23
-->
<template>
  <div class="banner">
    <!-- swiper -->
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide><img src="@/assets/img/img1.jpg" alt="" /></swiper-slide>
      <swiper-slide><img src="@/assets/img/img2.jpg" alt="" /></swiper-slide>
      <swiper-slide><img src="@/assets/img/pic1.jpg" alt="" /></swiper-slide>
      <!-- 下面的小点 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 右箭头 -->
      <div class="swiper-button-prev b-color" slot="button-prev"></div>
      <!-- 左箭头 -->
      <div class="swiper-button-next b-color" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      //swiper 初始化
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  width: 510px;
  height: 300px;
  margin: 50px 0 50px 80px;
  img {
    width: 510px;
    height: 300px;
    border-radius: 20px;
  }
  .b-color {
    color: #ccc !important;
    opacity: 0.4;
  }
}
</style>
